@import (reference) "@{cosyless}";
/*
form 表单
*/
@formGrid:5px;//基础间隔
@formFontSize:14px;//字体大小
@formColor:#333;//字体颜色
@formColorAncillary:#999;//辅助字体颜色
@formColorSkin:#4caf50;//主色调

.fui-form{
    .form-item{
        .clearfix();
        margin-bottom:3*@formGrid;
        &-label{
            padding: 3/2*@formGrid 3*@formGrid;
            line-height:4*@formGrid;
            float: left;
            text-align: right;
            width:15*@formGrid;
            font-size: @formFontSize;
            color: @formColor;
        }
        &-block{
            min-height:7*@formGrid;
            margin-left: 21*@formGrid;
        }
        &-input{
            height:7*@formGrid;
            line-height:4*@formGrid;
            padding: 3/2*@formGrid 0;
            width:100%;
            border: 1px solid #e6e6e6;
            outline:none;
            box-sizing: border-box;
            text-indent: 2*@formGrid;
            font-size: @formFontSize;
            border-radius: 2px;
            color: @formColor;
        }
        &-inline{
            float: left;
            width:40%;
            margin-right: 2*@formGrid;
        }
        &-aux{
            float: left;
            padding: 3/2*@formGrid 0;
            line-height:4*@formGrid;
            font-size: 6/7*@formFontSize;
            color: @formColorAncillary;
        }
        &-radio{
            display: inline-block;
            vertical-align: middle;
            margin-right: 2*@formGrid;
            line-height: 4*@formGrid;
            padding: 3/2*@formGrid 0;
            color: @formColorAncillary;
            font-size: @formFontSize;
            cursor: pointer;
            .fui-font-radio{
                margin-top: -4px;
                display: inline-block;
            }
            &.fui-radio-checked{
                color: @formColorSkin;
            }
        }
        &-checkbox{
            display: inline-block;
            box-sizing: border-box;
            margin: @formGrid/2 2*@formGrid @formGrid/2 0;
            height:6*@formGrid;
            border: 1px solid #d2d2d2;
            padding-right: 6*@formGrid;
            background: #fff;
            position: relative;
            line-height: 6*@formGrid - 2px;
            border-radius: 2px;
            cursor: pointer;
            i{
                position: absolute;
                right:0;
                top:0;
                width:6*@formGrid;
                height:100%;
                color: #fff;
                text-align: center;
            }
            span{
                height:100%;
                display: inline-block;
                padding: 0 2*@formGrid;
                font-size: @formFontSize;
                background: #d2d2d2;
                color: #fff;
            }
            &:hover{
                border-color:#c2c2c2;
                span{
                    background: #c2c2c2;
                }
                i{
                    color: #c2c2c2;
                }
            }
            &.fui-checkbox-checked{
                border-color:@formColorSkin;
                span{
                    background: @formColorSkin;
                }
                i{
                    color: @formColorSkin;
                }
            }
        }
        &-switch{
            height:5*@formGrid;
            box-sizing: border-box;
            margin: @formGrid 0;
            border: 1px solid #d2d2d2;
            width:11*@formGrid;
            border-radius: 5*@formGrid;
            position: relative;
            line-height:5*@formGrid - 2px;
            cursor: pointer;
            span{
                font-size: 6/7*@formFontSize;
                position: absolute;
                right:@formGrid;
                color: @formColorAncillary;
            }
            &:after{
                content: '';
                position: absolute;
                background: #d2d2d2;
                border-radius: 50%;
                width:5*@formGrid - 4px;
                height:5*@formGrid - 4px;
                left: 1px;
                top:1px;
                transition:all .2s;
            }
            &.fui-switch-checked{
                border-color:@formColorSkin;
                background: @formColorSkin;
                span{
                    left:@formGrid;
                    right:auto;
                    color: #fff;
                }
                &:after{
                    left:6*@formGrid + 1px;
                    background: #fff;
                }
            }
        }
        &-select{
            position: relative;
            .form-item-input{
                cursor: pointer;
            }
            &:after{
                content: '';
                border: solid @formGrid;
                border-color:@formColorAncillary transparent transparent transparent;
                position: absolute;
                right:2*@formGrid;
                top:3*@formGrid;
                transform-origin: 50% 25%;
                transition:all .3s
            }
            .form-select-option{
                position: absolute;
                top:7*@formGrid + 4px;
                left:0;
                min-width: 100%;
                box-sizing: border-box;
                box-shadow: 0 2px 4px rgba(0,0,0,.12);
                background-color:#fff;
                border-radius: 2px;
                max-height: 50*@formGrid;
                overflow-y: auto;
                z-index: 999;
                border: 1px solid #d2d2d2;
                padding: @formGrid 0;
                display: none;
                animation:ani-upShow .3s;
                li{
                    padding: 0 2*@formGrid;
                    line-height: 7*@formGrid;
                    cursor: pointer;
                    .text-overflow-nowrap-ellipsis();
                    color: @formColor;
                    &:hover{
                        background: #f2f2f2;
                    }
                    &.checked{
                        background: @formColorSkin;
                        color: #fff;
                    }
                }
            }
            &.fui-select-checked{
                &:after{
                    transform:rotate(180deg)
                }
                .form-select-option{
                    display: block;
                }
            }
        }
        &-textarea{
            box-sizing: border-box;
            width:100%;
            min-height: 100px;
            background: #fff;
            border-radius: 2px;
            border: 1px solid #e6e6e6;
            padding: @formGrid 2*@formGrid;
            line-height: 4*@formGrid;
            outline: none;
        }
        .form-submit{
            display: inline-block;
            border-radius: 2px;
            height:8*@formGrid;
            line-height: 8*@formGrid;
            text-align: center;
            padding: 0 4*@formGrid;
            color: #fff;
            background: @formColorSkin;
            font-size: @formFontSize;
            margin-right: 2*@formGrid;
        }
        .form-cancel{
            display: inline-block;
            border-radius: 2px;
            height:8*@formGrid - 2px;
            line-height: 8*@formGrid - 2px;
            text-align: center;
            padding: 0 3*@formGrid;
            border: 1px solid #d2d2d2;
            color: #555;
            background: #fff;
            font-size: @formFontSize;
        }

    }

}


@keyframes ani-upShow{
    from{
        transform:translate3d(0,30px,0);opacity:.3
    }
    to{
        transform:translate3d(0,0,0);opacity:1
    }
}





